<template>
  <div class="news">
    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar
        style="background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);"
        title="咨讯详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <!-- 主体内容区 -->
    <div class="container">
      <h2 class="title">{{ article.title }}</h2>
      <div class="title_sub">
        <span>
          <strong>所属栏目：</strong>
          {{ article.category && article.category.name }}
        </span>
        <span>
          <strong>发布时间：</strong>
          {{ article.publishTime | fmtDate_global }}
        </span>
      </div>
      <div class="content" v-html="article.content" />
      <!-- 文章内容 -->
    </div>
    <!-- 分享文章 -->
    <div style="float:right;margin-right:30px;margin-bottom:15px">
      <span style="color:#ccc">分享：</span>
      <van-icon name="share" color="#ff5000" size="25" @click="showShare=true"/>
    </div>
    <!-- 点赞 -->
    <div style="float:right;margin-right:30px;margin-bottom:15px">
      <span style="color:#ccc">点赞数：</span>
      <van-icon name="star" size="25" color="#ff5000" :badge=article.thumpUp @click="addThumpUp"/>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <van-field
        v-model="comment"
        type="textarea"
        rows="3"
        placeholder="请输入评论"
      />
    </div>
    <!-- 评论提交按钮 -->
    <van-button
      type="primary"
      @click="submitComment"
      class="submitBtn"
      >提交</van-button
    >
    <!-- 评论列表 -->
    <div class="comment_list">
      <van-card v-for="comment in article.comments" :key="comment.id">
        <template #tags>
          <van-image
            round
            width="4rem"
            height="4rem"
            :src="comment.baseUser.userFace"
            style="float:left;margin-top:10px;"
          />
          <div style="margin-left: 70px;margin-top:10px; padding: 0 0.5em">
            <div style="line-height: 2em">
              <strong>{{ comment.baseUser.realname }}</strong>
            </div>
            <div style="line-height: 2em">{{ comment.comment }}</div>
            <div style="line-height: 2em">
              评论时间： {{ comment.commentTime | fmtDate_global }}
            </div>
          </div>
        </template>
      </van-card>
    </div>
    <!-- 占位 -->
    <div style="height: 90px"></div>

    <!-- 分享面板 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      id: "",
      article: {},
      comment: "",
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    };
  },
  computed: {
    // 引入用户信息对象
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入用户数据
    ...mapActions("user", ["getUserInfo"]),
    // 点击分享选项
    onSelect(option) {
      this.$toast(option.name+'分享成功');
      this.showShare = false;
    },
    // 点赞
    async addThumpUp(){
      console.log('点击了');
      let data ={
        id:this.id
      }
      let res=await get('/index/thumbUpArticle',data)
      // this.loadArticle()
      this.loadArticle(this.id);
    },
    //   加载文章详情
    async loadArticle(id) {
      let res = await get("/article/findById", { id });
      this.article = res.data.data;
    },
    // 提交评论
    async submitComment() {
      let data = {
        comment: this.comment,
        userId: this.userInfo.id,
        articleId: this.id,
      };
      console.log(data);
      if (this.comment && this.comment.length > 5) {
        let res = await post("/comment/saveOrUpdate", data);
        this.loadArticle(this.id)
        this.$toast.success("评论成功!");
      } else {
        this.$toast.fail("评论长度不足5个字,请重新输入！");
      }
      // 清空评论
      this.comment = "";
    },
    //   返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    this.id = this.$route.query.id;
    // 加载文章内容
    this.loadArticle(this.id);
    this.getUserInfo();
  },
};
</script>

<style scoped>
.submitBtn {
  margin-right: 20px;
  margin-top: 10px;
  height: 35px;
  float: right;
}
.comment_list{
  clear: both;
}
.comment {
  clear: both;
  width: 95%;
  border: 1px solid #dcdfe6;
  margin: 0 auto;
}
.container {
  padding: 20px;
}
.container .title {
  text-align: center;
}
.content >>> img {
  width: 250px;
  height: 210px;
}
.title_sub {
  color: #999;
  font-size: 13px;
  text-align: center;
  margin-bottom: 15px;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar__text {
  color: #fff;
}
/deep/ .van-icon-arrow-left {
  color: #fff;
}
</style>